{% extends 'base/base.html' %}

{% block title %}
<title>agem目录</title>
{% endblock %}

{% block body %}
    <div class="body_content_wrapper pb-2">
        <div class="container xcontainer">
            <section class="bg-dark rounded-3 g-0 p-3 text-white">
                <div id="search_results_wrapper">
                    <div id="filter_box">
                        <div class="row">
                            <div class="col-md-12 filter_field">
                                <div class="d-flex">
                                    <div class="filter_type"><a href='{% url "main:catalog" %}' class="filter_type_name btn btn-sm active" data-ntype="type">版本</a></div>
                                    <div class="filter_type_list px-2">
                                        {% for cate in category %}
                                        <a href='{% url "main:category" cate.id %}' class="filter_list_item btn btn-sm " data-id="{{ cate.id }}">{{ cate.title }}</a>
                                        {% endfor %}
                                    </div>
                                </div>
                                <hr class="hr-gray my-2">
                            </div>

                            <div class="col-md-12 filter_field">
                                <div class="d-flex">
                                    <div class="filter_type"><a href='{% url "main:catalog" %}' class="filter_type_name btn btn-sm active " data-ntype="status">类型</a></div>
                                    <div class="filter_type_list px-2">
                                        {% for label in labels %}
                                        <a href='{% url "main:label" label.id %}' class="filter_list_item btn btn-sm ">{{ label.title }}</a>
                                        {% endfor %}
                                    </div>
                                </div>
                                <hr class="hr-gray my-2">
                            </div>
                            <div class="col-md-12 filter_field">
                                <div class="d-flex">
                                    <div class="filter_type"><a href='{% url "main:catalog" %}' class="filter_type_name btn btn-sm active " data-ntype="status">状态</a></div>
                                    <div class="filter_type_list px-2">
                                        {% for sta in status %}
                                        <a href='{% url "main:status" sta.id %}' class="filter_list_item btn btn-sm ">{{ sta.title }}</a>
                                        {% endfor %}
                                    </div>
                                </div>
                                <hr class="hr-gray my-2">
                            </div>
                        </div>
                    </div>
                    <div id="cata_video_wrapper">
                        <div id="cata_video_list" class="row">
                            <div class="col-md-12">
                                {% for an in page.object_list %}
                                <div class="card cata_video_item py-4">
                                    <div class="d-flex">
                                        <div class="video_cover">
                                        <div class="video_cover_wrapper">
                                            <a href='{% url "main:detail" an.id %}' class="d-block" title="{{ an.title }}"><img class="video_thumbs lazyload" src="https://cdn.aqdstatic.com:966/age/{{ an.imglink }}" data-original="https://cdn.aqdstatic.com:966/age/{{ an.imglink }}" alt="{{ an.title }}" style="display: inline;"></a>
                                            <span class="video_play_status rounded text-truncate">第{{ an.episode }}集</span>
                                        </div>
                                    </div>
                                        <div class="card-body">
                                        <h5 class="card-title"><a href='{% url "main:detail" an.id %}'>{{ an.title }}</a></h5>
                                        <div class="video_detail_info"><span>动画种类：</span>{{ an.category }}</div>
                                        <div class="video_detail_info"><span>首播时间：</span>{{ an.pub_date }}</div>
                                        <div class="video_detail_info"><span>播放状态：</span>{{ an.status }}</div>
                                        <div class="video_detail_info"><span>原作：</span>{{ an.author }}</div>
                                        <div class="video_detail_info"><span>剧情类型：</span>
                                            {% for label in an.label.all %}
                                            {{ label }}
                                            {% endfor %}
                                        </div>
                                        <div class="video_detail_info desc"><span>简介：</span>{{ an.introduce }}</div>
                                        <div class="video_btns">
                                            <a href='{% url "main:detail" an.id %}' class="btn btn-sm btn-secondary me-2">资源详情</a>
                                            <a href='{% url "main:detail" an.id %}' class="btn btn-sm btn-danger">在线播放</a>
                                        </div>
                                    </div>
                                    </div>
                                </div>
                                {% endfor %}
                            </div>
                        </div>
                        <div class="row mt-4">
                    <div class="col-md-12">
                        <nav class="cate_video_list_pagination_wrapper common_pagination" aria-label="navigation">
                            <ul class="pagination">
                                <li class="page-item disabled"><a class="page-link" href="javascript:;">共 <strong>{{ anime_len }}</strong> 条记录，当前 <strong>{{ page_num }}/{{ page.paginator.num_pages }}</strong> 页</a></li>
                                <li class="page-item"><a class="page-link" href="?page=1">首页</a></li>
                                {% if page.has_previous %}
                                <li class="page-item"><a class="page-link" href="?page={{ page.previous_page_number }}">上一页</a></li>
                                {% endif %}

                                {% for page_num in page.paginator.page_range %}
                                <li class="page-item "><a class="page-link" href="?page={{ page_num }}">{{ page_num }}</a></li>
                                {% endfor %}

                                {% if page.has_next %}
                                <li class="page-item"><a class="page-link" href="?page={{ page.next_page_number }}">下一页</a></li>
                                {% endif %}

                                <li class="page-item"><a class="page-link" href="?page={{ page.paginator.num_pages }}">尾页</a></li>
                            </ul>
                        </nav>
                    </div>
                </div>
                    </div>
                </div>
            </section>
        </div>
    </div>


{% endblock %}
{% block js %}
<script>
    document.addEventListener('DOMContentLoaded', function() {
            const filterItems = document.querySelectorAll('.filter_list_item');

            filterItems.forEach(item => {
                item.addEventListener('click', function() {
                    // 移除所有元素的 active 类
                    filterItems.forEach(i => i.classList.remove('active'));

                    // 为当前点击的元素添加 active 类
                    this.classList.add('active');
                });
            });
        });
</script>
{% endblock %}